<template>
  <view
    style="padding: 3px 5px; border: 1px solid #dadada; border-radius: 5px"
    :style="{
      backgroundColor: disabled ? '#f5f7fa' : '#fff',
    }"
  >
    <picker
      :disabled="disabled"
      mode="date"
      :value="value"
      @change="bindDateChange"
    >
      <view>{{ value != null ? dateStr : "无" }}</view>
    </picker>
  </view>
</template>
<script>
export default {
  name: "LiDatePicker",
  props: {
    value: {},
    disabled: {
      type: Boolean,
      default: false,
    },
    showMinute: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    dateStr: function () {
      const d = new Date(this.value);
      return (
        d.getFullYear() +
        "年" +
        (d.getMonth() + 1) +
        "月" +
        d.getDate() +
        "日" +
        `${this.showMinute ? d.getHours() + "时" + d.getMinutes() + "分" : ""}`
      );
    },
  },
  methods: {
    bindDateChange(e) {
      this.$emit("input", e.detail.value);
    },
  },
};
</script>
